<template>
	<view class="container">
		<view class="header">
			<view class="title">学习中心</view>
			<view class="subtitle">提升环保知识，成为环保达人</view>
        </view>
		
		   <!-- 进度卡片 -->
		   <view class="progress-card">
		     <view class="card-header">
		       <view class="progress-info">
		         <text class="progress-label">学习进度</text>
		         <text class="progress-status">{{ progressText }}</text>
		       </view>
		       <view class="level-circle">
		         <text class="level-text">LV.{{ level }}</text>
		       </view>
		     </view>
		   
		     <!-- 进度条 -->
		     <view class="progress-bar">
		       <view class="bar-inner" :style="{ width: progress + '%' }"></view>
		     </view>
		   
		     <!-- 统计数据：环保值、达标天数、学习时长 -->
		     <view class="stats-row">
		       <view class="stat-item">
		         <text class="stat-value">{{ ecoValue }}</text>
		         <text class="stat-label">环保值</text>
		       </view>
		       <view class="stat-item">
		         <text class="stat-value">{{ targetDays }}</text>
		         <text class="stat-label">达标天数</text>
		       </view>
		       <view class="stat-item">
		         <text class="stat-value">{{ studyTime }}</text>
		         <text class="stat-label">学习时长</text>
		       </view>
		     </view>
		   </view>
		<view class="content">
			<view class="section">
				<view class="section-header">
				<view class="section-title">推荐课程</view>
				
		<!-- 搜索框 + 筛选标签栏 -->
						  <view class="search-filter-bar">
						    <!-- 搜索框 -->
						    <view class="search-box">
						       <uni-icons type="search" size="28" color="#999"></uni-icons>
						      <input 
						        class="search-input" 
						        type="text" 
						        placeholder="搜索课程" 
						      v-model="searchKeyword"
						     />
						    </view>
				
				    <!-- 筛选标签（横向滚动） -->
				    <view class="filter-tabs">
				      <view 
				        class="filter-tab" 
				        v-for="(tab, index) in filterTabs" 
				        :key="index"
						:class="{ active: currentTab === index }"
						 @click="switchTab(index)"
				      >
				        {{ tab }}
				      </view>
					</view>
				  </view>
				  </view>


				<view class="course-list">
					<view class="course-item" v-for="(course, index) in filteredCourses" :key="index">
					
						<image 
							class="course-icon" 
							:src="course.imageUrl"  
							mode="aspectFit"        
							alt="课程图标"          
						></image>
						<!-- 课程信息 -->
				<view class="course-info">
			    <view class="course-title">{{ course.title }}</view>
				<view class="course-desc">{{ course.description }}</view>
				</view>
												<!-- 学习进度 -->
				<view class="course-progress">{{ course.progress }}%</view>
				</view>
						
											<!-- 无结果提示（仅当课程为空时显示） -->
				<view class="no-result" v-if="filteredCourses.length === 0">
					未找到相关课程~
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

					
	

<script>
export default {
	data() {
		return {
			      level: 2,          
			      progress: 16.67,   // 1/6 ≈ 16.67%
			      progressText: '1/6 完成', 
			      ecoValue: 47,      
			      targetDays: 3,     
			      studyTime: 25,   
				  
		    filterTabs: [    
			        "全部",
			        "垃圾分类",
			        "节能减排",
			        "绿色生活",
			        "气候行动"
			      ],
				currentTab: 0,     
				searchKeyword: '', 
				  
			courses: [
				{
					title: '垃圾分类基础',
					description: '学习垃圾分类的基本知识',
					progress: 80,
					category: '垃圾分类',
					imageUrl:"/static/lesson picture/p1.jpg"
				},
				{
					title: '环保生活指南',
					description: '如何在日常生活中践行环保',
					progress: 45,
					category: '绿色生活',
					imageUrl:"/static/lesson picture/p2.jpg"
				},
				{
					title: '可持续发展',
					description: '了解可持续发展的理念和实践',
					progress: 20,
					category: '气候行动',
					imageUrl:"/static/lesson picture/p3.jpg"
				},
				{
					title: '家庭节能技巧',
					description: '学习家庭生活中的节能小妙招',
					progress: 60,
					category: '节能减排',
					imageUrl:"/static/lesson picture/p4.jpg"
				},
				{
					title: '塑料污染治理',
					description: '了解塑料污染的危害及治理方法',
					progress: 30,
					category: '绿色生活',
					imageUrl:"/static/lesson picture/p5.jpg"
				}
			]
		}
	},
	computed: {
		// 根据标签和搜索关键词筛选课程
		filteredCourses() {
			return this.courses.filter(course => {
				// 标签筛选
				const tabMatch = this.currentTab === 0 || course.category === this.filterTabs[this.currentTab]
				// 搜索筛选
				const searchMatch = !this.searchKeyword || 
									course.title.includes(this.searchKeyword) || 
									course.description.includes(this.searchKeyword)
				
				return tabMatch && searchMatch
			})
			console.log('筛选后课程：', result) 
			return result
		}
	},
	methods: {
		switchTab(index) {
			this.currentTab = index
			}
		}
	}
	</script>
	
	<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.header {
		background: linear-gradient(135deg, #4CAF50, #8BC34A);
		padding: 60rpx 40rpx 40rpx;
		color: white;
		.title {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.subtitle {
			font-size: 28rpx;
			opacity: 0.9;
		}
	}
	
	.progress-card {
		background: #EAF8F5;
		border-radius: 20rpx;
		padding: 24rpx;
		margin: 20rpx;
		box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.08);
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;
			.progress-info {
				.progress-label {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				.progress-status {
					font-size: 26rpx;
					color: #666;
					margin-top: 8rpx;
					display: block;
				}
			}
			.level-circle {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #1aad19, #4cd964);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.progress-bar {
			width: 100%;
			height: 12rpx;
			background: #C9EBDF;
			border-radius: 6rpx;
			overflow: hidden;
			margin: 16rpx 0;
			.bar-inner {
				height: 100%;
				background: #1aad19;
				transition: width 0.3s ease;
			}
		}
		.stats-row {
			display: flex;
			justify-content: space-around;
			margin-top: 24rpx;
			.stat-item {
				text-align: center;
				.stat-value {
					font-size: 36rpx;
					color: #ff6633;
					font-weight: bold;
					display: block;
				}
				.stat-label {
					font-size: 24rpx;
					color: #666;
					margin-top: 4rpx;
				}
			}
		}
	}
	
	.content {
		padding: 30rpx 20rpx;
		.section {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 25rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
			
			.section-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx; 
				flex-wrap: wrap;
			}
			
			.section-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-right: 20rpx; // 与搜索栏的间距
			}
	
			// 搜索和筛选栏
			.search-filter-bar {
				display: flex;
				align-items: center;
				flex: 1; 
				min-width: 300rpx; 
				
				.search-box {
					flex: 1;
					display: flex;
					align-items: center;
					background: #FFFFFF;
					border-radius: 28rpx;
					padding: 12rpx 20rpx;
					box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
					margin-right: 15rpx;
					
					.search-input {
						flex: 1;
						font-size: 24rpx;
						color: #333;
						border: none;
						outline: none;
						height: 50rpx;
					}
				}
				
				.filter-tabs {
					display: flex;
					align-items: center;
					overflow-x: auto;
					white-space: nowrap;
					padding-bottom: 5rpx;
					
					&::-webkit-scrollbar {
						display: none;
					}
					
					.filter-tab {
						flex-shrink: 0;
						padding: 8rpx 18rpx;
						margin-right: 12rpx;
						background: #F5F5F5;
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #666;
						transition: all 0.3s ease;
						cursor: pointer;
						
						&.active {
							background: #4CAF50;
							color: #fff;
							box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
						}
					}
				}
			}
	
			// 课程列表
			.course-list {
				.course-item {
					background: #F9FCFA; 
					border-radius: 16rpx;
					padding: 30rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
					transition: transform 0.2s ease;
					
					&:hover {
						transform: translateY(-2rpx);
						box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
					}
					
					.course-icon {
					  width: 100rpx;
					  height: 100rpx;
					  margin-right: 20rpx;
					  border-radius: 8rpx; 
					  flex-shrink: 0;
					}
					
					.course-info {
						flex: 1;
						.course-title {
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 8rpx;
						}
						.course-desc {
							font-size: 24rpx;
							color: #666;
							line-height: 1.5;
						}
					}
					
					.course-progress {
						font-size: 28rpx;
						font-weight: bold;
						color: #4CAF50;
						min-width: 80rpx;
						text-align: right;
						margin-left: 20rpx;
					}
				}
			}
	
			.no-result {
				text-align: center;
				padding: 80rpx 0;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
	</style>

